<template>
  <div class="app-container">
    <el-form
      ref="queryForm"
      :model="queryParams"
      :inline="true"
    >
      <el-form-item :label="$t('ccjob.label')" prop="tagId">
        <el-input
          v-model="queryParams.tagId"
          :placeholder="$t('ccjob.labelplaceholder')"
          style="width: 140px"
        />
      </el-form-item>
      <el-form-item :label="$t('ccjob.fenceId')" prop="fenceId">
        <el-select
          v-model="queryParams.fenceId"
          :placeholder="$t('ccjob.fenceIdplaceholder')"
        >
          <el-option
            v-for="item in fenceList"
            :key="item.id"
            :label="item.properties.operationName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('ccjob.carVin')" prop="carVin">
        <el-input
          v-model="queryParams.carVin"
          :placeholder="$t('ccjob.carVinplaceholder')"
          style="width: 140px"
        />
      </el-form-item>

      <el-form-item :label="$t('ccjob.date')">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          :start-placeholder="$t('common.cstartTime')"
          :end-placeholder="$t('common.cendTime')"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery">{{
          $t("common.csearch")
        }}</el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">{{
          $t("common.creset")
        }}</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" style="display: flex; align-items: center">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" @click="addList">{{
          $t("operating.add")
        }}</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >{{ $t("operating.export") }}</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"

          @click="handleExport"
        >{{ $t("operating.import") }}</el-button>
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"

          :disabled="multiple"
          @click="handleDelete"
        >{{ $t('common.cdelete') }}</el-button>
      </el-col> -->

      <!-- <right-toolbar
        :show-search.sync="showSearch"
        :columns="columns"
        @queryTable="initVisitor"
      /> -->
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="recordId" label="ID" width="40" />
      <el-table-column prop="carVin" :label="$t('ccjob.carVin')" />
      <!-- <el-table-column prop="operationName" :label="$t('ccjob.carVin')" /> -->
      <!-- <el-table-column prop="fenceId" label="围栏Id" /> -->
      <el-table-column prop="fenceId" :label="$t('ccjob.fenceId')">
        <!-- <template slot-scope="scope">{{ scope.row.fenceId|fenceType(fenceList) }}</template> -->
      </el-table-column>
      <el-table-column prop="intoTime" :label="$t('ccjob.intoTime')" />
      <el-table-column prop="leaveTime" :label="$t('ccjob.leaveTime')" />
      <el-table-column prop="tagId" :label="$t('ccjob.tagId')" />
      <el-table-column prop="turnsCount" :label="$t('ccjob.turnsCount')" />
      <el-table-column prop="remark" :label="$t('ccjob.remark')" />
      <el-table-column prop="createTime" :label="$t('ccjob.createTime')" width="140" />
      <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.row, scope.$index)"
          >删除</el-button>
          <el-button
            type="text"
            size="small"
            @click="handleEdit(scope.row, scope.$index)"
          >修改</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="initList"
    />

    <el-dialog
      title="内容"
      :visible.sync="isAdd"
      width="682px"
      @close="closeDialog"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标签Id" prop="tagId">
              <el-input v-model="form.tagId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="围栏Id" prop="fenceId">
              <!-- <el-input v-model="form.fenceId" /> -->
              <el-select
                v-model="form.fenceId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in fenceList"
                  :key="item.id"
                  :label="item.properties.operationName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业名称" prop="operationName">
              <el-input
                v-model="form.operationName"
                :placeholder="$t('operating.rule')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆vin码" prop="carVin">
              <el-input
                v-model="form.carVin"
                :placeholder="$t('operating.rule')"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="进入时间" prop="intoTime">
              <el-date-picker
                v-model="form.intoTime"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离开时间" prop="leaveTime">
              <el-date-picker
                v-model="form.leaveTime"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="圈数" prop="turnsCount">
              <el-input v-model="form.turnsCount" placeholder="圈数" />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button type="primary" size="mini" @click="onSubmit">{{
            $t("map.save")
          }}</el-button>
          <el-button size="mini" @click="onCancel">{{ $t("operating.cancel") }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  ccJobAdd,
  ccJobEdit,
  ccJobId,
  ccJobDelete,
  ccJobList,
  fenceLayerList
} from '@/api/cy.js'
export default {
  filters: {
    fenceType(value, fenceList) {
      let keyword
      keyword = value
      if (fenceList.length > 0) {
        fenceList.forEach((item) => {
          if (item.id == value) {
            keyword = item.properties.operationName
          }
        })
      }

      return keyword
    },
    getNull(value) {
      return value || '暂无'
    }
  },
  data() {
    return {
      total: 0, // 总页数
      dateRange: [], // 来访日期范围
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        operationName: '1',
        tagId: undefined, // 标签id
        fenceId: undefined, // 围栏id
        carVin: undefined // 车辆vin码
      },
      typeOperation: {
        operationName: '1'
      },
      form: {
        fenceId: undefined,
        tagId: undefined,
        carVin: undefined, // 车辆vin码
        createTime: undefined, // 创建时间
        turnsCount: undefined, // 圈数
        intoTime: undefined, // 进入时间
        leaveTime: undefined, // 离开时间
        operationName: '', // 作业名称
        remark: undefined // 备注
      },
      isAdd: false,
      isEdit: false,
      rules: {},
      tableData: [],
      fenceList: []
    }
  },
  mounted() {
    this.initAllFence()
    this.initList()
  },
  methods: {

    initAllFence() {
      fenceLayerList().then(res => {
        if (res.code === 200) {
          this.fenceList = res.data
        }
      })
    },

    handleDelete(row, index) {
      this.deleteRow(
        this.$i18n.t('common.cdelTipItem') + row.operationName,
        row.recordId
      )
    },

    deleteRow(delTip, delData) {
      this.$confirm(delTip, this.$i18n.t('common.cwarn'), {
        confirmButtonText: this.$i18n.t('common.cok'),
        cancelButtonText: this.$i18n.t('common.ccancel'),
        type: 'warning'
      })
        .then(() => {
          return ccJobDelete(delData)
        })
        .then((response) => {
          this.msgSuccess(response.msg)
          setTimeout(() => {
            this.initList()
          }, 1500)
        })
    },

    handleEdit(row, index) {
      this.form = row
      this.isAdd = true
      this.isEdit = true
    },
    initList() {
      ccJobList(this.choseDateRange(this.queryParams, this.dateRange)).then(
        (res) => {
          this.tableData = res.rows
          this.total = res.total
        }
      )
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.initList()
    },

    /** 重置搜索操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    addList() {
      this.isAdd = true
      return
    },
    onSubmit() {
      this.form.operationName = parseInt(this.form.operationName)
      if (this.isEdit) {
        ccJobEdit(this.form).then((res) => {
          if (res.code === 200) {
            console.log(res)
            this.isEdit = false
            this.onCancel()
            this.initList()
          }
        })
      } else {
        ccJobAdd(this.form).then((res) => {
          if (res.code === 200) {
            console.log(res)
            this.isEdit = false
            this.onCancel()
            this.initList()
          }
        })
      }
    },

    handleExport() {
      // 根据搜索条件导出内容
      const urlPath = '/socket/operationRecord/export'
      const filename = 'jobRecord_' + new Date().getTime() + '.xls'
      this.download(urlPath, { ...this.typeOperation }, filename)
    },
    closeDialog() {
      this.form = {}
      this.isAdd = false
      // this.resetForm('form')
    },
    onCancel() {
      this.closeDialog()
    }
  }
}
</script>

<style>
</style>
